<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <title>Document</title>
</head>
<style>
  .box {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: start;
    text-align: left;
    /* margin: 0 auto; */
    /* border: 2px solid lightblue; */
    background: #fff;
    /* margin-bottom: 20px; */
  }

  .box2 {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: start;
    text-align: left;
    /* margin: 0 auto; */
    /* border: 2px solid lightblue; */
    background: #fff;
    /* margin-bottom: 20px; */
  }

  .box-in {
    margin-left: 60px;
  }

  .box-in2 {
    display: flex;
  }

  .textBox1 {
    display: flex;
    flex-direction: column;
    height: 100px;
    margin-top: -15px;
    margin-left: -10px;
  }

  .textBox2 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100px;
    margin-top: 10px;
  }

  .text {
    font-size: 6px;
    line-height: 15px;
    font-weight: bold;
  }

  .text2 {
    height: 25%;
  }
</style>

<body>
  <div class="box">
    <div id="boxStyle" class="box-in2">
      <img style="width: 120px;height: 120px;" id="ossImg" src="./replace.png">
      <div id="textStyle" class="textBox">
        <div class="text" id="deviceId"></div>
        <div class="text" id="deviceType"></div>
        <div class="text" id="brand"></div>
        <div class="text" id="areaName"></div>
      </div>
    </div>
  </div>
  <button style="display: none;" onclick="getCard()" id="save">输出canvas</button>
  <script>
    var c_width = $('.box').outerWidth();//如果box设置了padding，需要获取outerWidth和outerHeight来赋给canvas；
    var c_height = $('.box').outerHeight();

    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var selectDiv = ''

    //以下代码是获取根据屏幕分辨率，来设置canvas的宽高以获得高清图片
    // 屏幕的设备像素比
    var devicePixelRatio = window.devicePixelRatio || 2;

    // 浏览器在渲染canvas之前存储画布信息的像素比
    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio || 1;

    // canvas的实际渲染倍率
    var ratio = devicePixelRatio / backingStoreRatio;

    // canvas.width = c_width * ratio;
    // canvas.height = c_height * ratio * 2;
    canvas.width = 500;
    canvas.height = 200;
    // canvas.style.width = c_width + "px";
    // canvas.style.height = c_height + "px";

    // var transTop = $(document).scrollTop() - $('.box').offset().top;//获取div垂直方向的位置

    // context.scale(ratio, ratio);
    // context.translate((c_width - $(window).width()) / 2, transTop) //canvas的位置要保证与div位置相同。
    //高清图设置完成
    //解决跨域，将跨域图片路径转为base64格式
    var img = new Image();
    var canvas2 = document.createElement('canvas');
    var ctx = canvas2.getContext('2d');
    img.crossOrigin = 'Anonymous';
    img.src = $('#ossImg').attr('src');
    img.onload = function () {
      canvas2.height = img.height;
      canvas2.width = img.width;
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas2.toDataURL('image/png');
      $('#ossImg').attr('src', dataURL);
      canvas2 = null;
    }

    function getData (d) {
      d.deviceId ? document.getElementById('deviceId').innerHTML = "ID:" + d.deviceId : document.getElementById('deviceId').innerHTML = "ID:"
      d.deviceTypeName ? document.getElementById('deviceType').innerHTML = "类型:" + d.deviceTypeName : document.getElementById('deviceId').innerHTML = "类型:"
      d.brand ? document.getElementById('brand').innerHTML = "品牌:" + d.brand : document.getElementById('deviceId').innerHTML = "品牌:"
      d.areaName ? document.getElementById('areaName').innerHTML = "位置:" + d.areaName : document.getElementById('areaName').innerHTML = "位置:"
      let qrImg = document.getElementById('ossImg')
      qrImg.src = d.imgUrl
      canvas.width = d.width;
      canvas.height = d.height;
      document.getElementById('boxStyle').className = d.classname
      document.getElementById('textStyle').className = d.classname2
    }

    function getCard () {
      html2canvas($(".box"), {
        allowTaint: true,
        useCORS: true,
        canvas: canvas,
        onrendered: function (canvas) {
          // document.body.appendChild(canvas);//生成和div一样的canvas元素
          var type = 'png';
          var imgData = canvas.toDataURL(type);
          var _fixType = function (type) {
            type = type.toLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
          };
          imgData = imgData.replace(_fixType(type), 'image/octet-stream');
          var saveFile = function (data, filename) {
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
          };
          var filename = 'img' + '.' + type;
          if (canvas.msToBlob) {//IE9+浏览器
            var blob = canvas.msToBlob();
            window.navigator.msSaveBlob(blob, filename);
          } else {//firefox,chrome
            saveFile(imgData, filename);
          }
        },
        width: c_width,
        height: c_height
      })
    }
  </script>
</body>

</html>